<template>
	<view class="shopDetail">
		<view class="preview-img">
			<swiper circular @change="previewChange" indicator-dots indicator-color="rgba(0,0,0,0.2)"
				indicator-active-color="#000">
				<swiper-item v-for="item in carousels" @click="previewImg()">
					<image :src="item" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<view class="point">{{currentIndex + 1}}/{{carousels.length}}</view>
		</view>
		<view class="about">
			<view class="score">{{goodData.score}} 积分</view>
			<view class="good-name">{{goodData.good_name}}</view>
			<view class="desc">{{goodData.desc}}</view>
			<view class="stock">库存 - {{goodData.stock}}</view>
		</view>
		<view class="exchange-btn">
			<view class="buy" @click="doExchange()">立即兑换</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		apiGetGoodsDetail,
		apiGoodPay
	} from '@/api/apis';
	let goodData = ref([])
	let carousels = ref([])
	let currentIndex = ref(0)
	onLoad((e) => {
		getDetail(e.id)
	})
	const doExchange =  () => {
		uni.showModal({
			title: "温馨提示",
			content: `确定要兑换吗?这将耗费[ ${goodData.value.score} ]积分`,
			success: async res => {
				if (res.confirm) {
					await apiGoodPay({
						id: goodData.value.id
					}).then(res => {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					})
				}
			}
		})

	}
	const previewImg = (item) => {
		uni.previewImage({
			urls: carousels.value,
			current: currentIndex.value,
			longPressActions: {
				itemList: ['发送给朋友', '保存图片', '收藏'],
				success: function(data) {
					console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
				},
				fail: function(err) {
					console.log(err.errMsg);
				}
			}
		});
	}
	const getDetail = async (id) => {
		await apiGetGoodsDetail({
			id
		}).then(res => {
			goodData.value = res.data
			carousels.value = res.data.images
		})
	}
	const previewChange = (e) => {
		currentIndex.value = e.detail.current
	}
</script>

<style lang="scss" scoped>
	.shopDetail {
		.preview-img {
			position: relative;

			swiper {
				width: 100%;
				height: 600rpx;

				swiper-item {
					width: 100%;
					height: 100%;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.point {
				position: absolute;
				top: 10rpx;
				right: 20rpx;
				background-color: rgba(0, 0, 0, 0.2);
				color: #fff;
				font-size: 28rpx;
				padding: 10rpx;
				border-radius: 30rpx;
			}
		}

		.about {
			padding: 20rpx;

			.score {
				font-weight: 600;
				color: #ff4400;
				font-size: 46rpx;
				margin: 20rpx 0;
			}

			.good-name {
				color: #000;
				font-size: 34rpx;
				font-weight: 600;
				margin-bottom: 20rpx;
			}

			.desc {
				color: #777;
				font-size: 30rpx;
				margin-bottom: 20rpx;
			}

			.stock {
				font-size: 30rpx;
				color: #ff5519;
			}
		}

		.exchange-btn {
			font-size: 30rpx;

			.buy {
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 30rpx;
				background-color: #ff1111;
				padding: 16rpx 20rpx;
				margin: 0 20rpx;
				color: #fff;
				margin: 10rpx;
			}
		}
	}
</style>